<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="pg" uri="http://jsptags.com/tags/navigation/pager"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
  String picUrl = (String)request.getAttribute("Picurl");
  String  step = (String)request.getAttribute("step"); 
  String defaultPic =basePath+"image/man.GIF";
  if("3".equals(step))
  {
    defaultPic = basePath+"User/UserHeadImage/"+picUrl;
  }
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>会员头像上传</title>
		<link href="<%=basePath %>css/main.css" type="text/css" rel="Stylesheet" />
		<script type="text/javascript" src="<%=basePath %>js/jquery1.2.6.pack.js"></script>
		<script type="text/javascript" src="<%=basePath %>js/ui.core.packed.js"></script>
		<script type="text/javascript" src="<%=basePath %>js/ui.draggable.packed.js"></script>
		<script type="text/javascript" src="<%=basePath %>js/CutPic.js"></script>
		<script type="text/javascript">
        function Step1() {
            $("#Step2Container").hide();           
        }

        function Step2() {
            $("#CurruntPicContainer").hide();
        }
        function Step3() {
            $("#Step2Container").hide();          
       }
    </script>
	</head>
	<body>


		<div>
			<div class="left">
				<!--当前照片-->
				<div id="CurruntPicContainer">
					<div class="title">
						<b>当前照片</b>
					</div>
					<div class="photocontainer">
						<img id="imgphoto" src="<%=defaultPic%>"
							style="border-width: 0px;" />
					</div>
					${message }
					<br/>
					<script type="text/javascript"> function closeme(){ var browserName=navigator.appName; if (browserName=="Netscape") { window.open('','_parent',''); window.close(); } else if (browserName=="Microsoft Internet Explorer") { window.opener = "whocares"; window.close(); } } </script> <input type="button" value="窗口关闭" onclick="closeme();"/>
				</div>
				<!--Step 2-->
				<div id="Step2Container">
					<div class="title">
						<b> 裁切头像照片</b>
					</div>
					<div class="uploadtooltip">
						您可以拖动照片以裁剪满意的头像
					</div>
					<div id="Canvas" class="uploaddiv">

						<div id="ImageDragContainer">
							<img id="ImageDrag" class="imagePhoto"
								src="<%=basePath %>UploadPhoto/<%=picUrl %>" style="border-width: 0px;" />
						</div>
						<div id="IconContainer">
							<img id="ImageIcon" class="imagePhoto"
								src="<%=basePath %>UploadPhoto/<%=picUrl%>" style="border-width: 0px;" />
						</div>
					</div>
					<div class="uploaddiv">
						<table>
							<tr>
								<td id="Min">
									<img alt="缩小" src="<%=basePath %>image/_c.gif"
										onmouseover="this.src='<%=basePath %>image/_c.gif';"
										onmouseout="this.src='<%=basePath %>image/_h.gif';" id="moresmall"
										class="smallbig" />
								</td>
								<td>
									<div id="bar">
										<div class="child">
										</div>
									</div>
								</td>
								<td id="Max">
									<img alt="放大" src="<%=basePath %>image/c.gif"
										onmouseover="this.src='<%=basePath %>image/c.gif';"
										onmouseout="this.src='<%=basePath %>image/h.gif';" id="morebig"
										class="smallbig" />
								</td>
							</tr>
						</table>
					</div>
					<form action="file!saveHeadImage.action" method="post">
						<input type="hidden" name="picture" value="<%=picUrl%>" />
						<div class="uploaddiv">
							<input type="submit" name="btn_Image" value="保存头像" id="btn_Image" />
						</div>
						<div>
							图片实际宽度：
							<input name="txt_width" type="text" size="4" value="1" id="txt_width" />
							图片实际高度：
							<input name="txt_height" type="text" size="4" value="1" id="txt_height" />
							<br />
							距离顶部：
							<input name="txt_top" type="text" size="4" value="82" id="txt_top" />
							距离左边：
							<input name="txt_left" type="text" size="4" value="73" id="txt_left" />
							<br />
							截取框的宽：
							<input name="txt_DropWidth" type="text" size="4" value="120"
								id="txt_DropWidth" />
							截取框的高：
							<input name="txt_DropHeight" type="text" size="4" value="120"
								id="txt_DropHeight" />
							<br />
							放大倍数：
							<input name="txt_Zoom" type="text" id="txt_Zoom" />
						</div>
					</form>
				</div>

			</div>
			<form name="form1" method="post"
				action="file!headUpload.action" id="form1"
				enctype="multipart/form-data">
				<div class="right">
					<!--Step 1-->
					<div id="Step1Container">
						<div class="title">
							<b>更换照片</b>
						</div>
						<div id="uploadcontainer">
							<div class="uploadtooltip">
								请选择新的照片文件，文件需小于2.5MB
							</div>
							<div class="uploaddiv">
								<input type="file" name="myFile" id="fuPhoto" title="选择照片" />
							</div>
							<div class="uploaddiv">
								<input type="submit" name="btnUpload" value="上 传" id="btnUpload" />
							</div>
						</div>

					</div>
				</div>
			</form>
		</div>
		<% 
      if(null==picUrl||"".equals(picUrl))
      {%>
		<script type='text/javascript'>Step1();</script>
		<%}else if(!"".equals(picUrl)&& "2".equals(step)){
      %>
		<script type='text/javascript'>Step2();</script>
		<%}else if(!"".equals(picUrl)&& "3".equals(step)){
      %>
		<script type='text/javascript'>Step3();</script>
		<%}%>

	</body>
</html>										